<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>热度分析 - 新闻分析系统</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css" rel="stylesheet">
    <style>
        .hot-trend-card {
            transition: transform 0.2s;
        }
        .hot-trend-card:hover {
            transform: translateY(-5px);
        }
        .progress-sm {
            height: 6px;
        }
    </style>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <div class="container">
        <a class="navbar-brand" href="/">新闻分析系统</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav me-auto">
                <li class="nav-item">
                    <a class="nav-link" href="/news">新闻列表</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link active" href="/analysis/hot">热度分析</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/analysis/category">分类分析</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/analysis/sentiment">情感分析</a>
                </li>
            </ul>
            <form class="d-flex" action="/news/search" method="GET">
                <input class="form-control me-2" type="search" placeholder="搜索新闻..." name="keyword">
                <button class="btn btn-outline-light" type="submit">搜索</button>
            </form>
        </div>
    </div>
</nav>

<main class="container my-4">
    <div class="row">
        <!-- 热度趋势图 -->
        <div class="col-lg-8 mb-4">
            <div class="card shadow">
                <div class="card-header bg-danger text-white d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">热度趋势分析</h5>
                    <div class="btn-group">
                        <button class="btn btn-sm btn-outline-light active" onclick="updateTrendChart('day')">日</button>
                        <button class="btn btn-sm btn-outline-light" onclick="updateTrendChart('week')">周</button>
                        <button class="btn btn-sm btn-outline-light" onclick="updateTrendChart('month')">月</button>
                    </div>
                </div>
                <div class="card-body">
                    <canvas id="hotTrendChart" height="300"></canvas>
                </div>
            </div>
        </div>

        <!-- 热度分布 -->
        <div class="col-lg-4 mb-4">
            <div class="card shadow">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">热度分布</h5>
                </div>
                <div class="card-body">
                    <canvas id="hotDistributionChart" height="300"></canvas>
                </div>
            </div>
        </div>

        <!-- 实时热点榜 -->
        <div class="col-12">
            <div class="card shadow">
                <div class="card-header bg-info text-white">
                    <h5 class="mb-0">实时热点榜</h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                            <tr>
                                <th>排名</th>
                                <th>标题</th>
                                <th>分类</th>
                                <th>发布时间</th>
                                <th>热度指数</th>
                                <th>热度趋势</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>
                                    <span class="badge bg-danger">1</span>
                                </td>
                                <td>
                                    <a href="/news/7" class="text-decoration-none">中国队在世界羽毛球锦标赛夺得三金</a>
                                </td>
                                <td>
                                    <span class="badge bg-primary">体育</span>
                                </td>
                                <td>2025-04-30 08:45</td>
                                <td>
                                    <div class="progress progress-sm">
                                        <div class="progress-bar bg-danger"
                                             style="width: 95%">
                                            95
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <i class="bi bi-arrow-up-circle-fill text-success"></i>
                                    <span>12%</span>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <span class="badge bg-danger">2</span>
                                </td>
                                <td>
                                    <a href="/news/13" class="text-decoration-none">国产大型量子计算机研发取得突破</a>
                                </td>
                                <td>
                                    <span class="badge bg-primary">科技</span>
                                </td>
                                <td>2025-04-25 11:30</td>
                                <td>
                                    <div class="progress progress-sm">
                                        <div class="progress-bar bg-danger"
                                             style="width: 96%">
                                            96
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <i class="bi bi-arrow-up-circle-fill text-success"></i>
                                    <span>8%</span>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <span class="badge bg-danger">3</span>
                                </td>
                                <td>
                                    <a href="/news/9" class="text-decoration-none">CBA总决赛：辽宁队获得冠军</a>
                                </td>
                                <td>
                                    <span class="badge bg-primary">体育</span>
                                </td>
                                <td>2025-04-26 22:15</td>
                                <td>
                                    <div class="progress progress-sm">
                                        <div class="progress-bar bg-danger"
                                             style="width: 93%">
                                            93
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <i class="bi bi-dash-circle-fill text-warning"></i>
                                    <span>2%</span>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <span class="badge bg-secondary">4</span>
                                </td>
                                <td>
                                    <a href="/news/4" class="text-decoration-none">俄罗斯与白俄罗斯举行联合军事演习</a>
                                </td>
                                <td>
                                    <span class="badge bg-primary">军事</span>
                                </td>
                                <td>2025-04-29 15:30</td>
                                <td>
                                    <div class="progress progress-sm">
                                        <div class="progress-bar bg-danger"
                                             style="width: 92%">
                                            92
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <i class="bi bi-arrow-up-circle-fill text-success"></i>
                                    <span>15%</span>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <span class="badge bg-secondary">5</span>
                                </td>
                                <td>
                                    <a href="/news/9" class="text-decoration-none">第98届奥斯卡颁奖典礼完美落幕</a>
                                </td>
                                <td>
                                    <span class="badge bg-primary">娱乐</span>
                                </td>
                                <td>2025-04-29 10:20</td>
                                <td>
                                    <div class="progress progress-sm">
                                        <div class="progress-bar bg-danger"
                                             style="width: 94%">
                                            94
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <i class="bi bi-arrow-up-circle-fill text-success"></i>
                                    <span>10%</span>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <span class="badge bg-secondary">6</span>
                                </td>
                                <td>
                                    <a href="/news/3" class="text-decoration-none">国务院召开经济形势分析会议</a>
                                </td>
                                <td>
                                    <span class="badge bg-primary">政治</span>
                                </td>
                                <td>2025-04-26 09:45</td>
                                <td>
                                    <div class="progress progress-sm">
                                        <div class="progress-bar bg-danger"
                                             style="width: 91%">
                                            91
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <i class="bi bi-arrow-down-circle-fill text-danger"></i>
                                    <span>5%</span>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <span class="badge bg-secondary">7</span>
                                </td>
                                <td>
                                    <a href="/news/19" class="text-decoration-none">多国报告发现新型冠状病毒变异株</a>
                                </td>
                                <td>
                                    <span class="badge bg-primary">健康</span>
                                </td>
                                <td>2025-04-25 16:30</td>
                                <td>
                                    <div class="progress progress-sm">
                                        <div class="progress-bar bg-danger"
                                             style="width: 89%">
                                            89
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <i class="bi bi-arrow-up-circle-fill text-success"></i>
                                    <span>18%</span>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <span class="badge bg-secondary">8</span>
                                </td>
                                <td>
                                    <a href="/news/10" class="text-decoration-none">国家统计局：一季度GDP同比增长5.3%</a>
                                </td>
                                <td>
                                    <span class="badge bg-primary">经济</span>
                                </td>
                                <td>2025-04-21 09:15</td>
                                <td>
                                    <div class="progress progress-sm">
                                        <div class="progress-bar bg-danger"
                                             style="width: 89%">
                                            89
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <i class="bi bi-arrow-down-circle-fill text-danger"></i>
                                    <span>7%</span>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

<!-- 页脚 -->
<footer class="bg-dark text-light py-4 mt-5">
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <h5>新闻分析系统</h5>
                <p class="text-muted">提供多维度的新闻数据分析与可视化</p>
            </div>
            <div class="col-md-6 text-md-end">
                <p>&copy; 2025 新闻分析系统</p>
            </div>
        </div>
    </div>
</footer>

<!-- JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    // 热度趋势数据（每日）
    const dailyTrendData = [
        { time: '4-24', value: 78 },
        { time: '4-25', value: 83 },
        { time: '4-26', value: 85 },
        { time: '4-27', value: 82 },
        { time: '4-28', value: 88 },
        { time: '4-29', value: 92 },
        { time: '4-30', value: 95 }
    ];

    // 热度趋势数据（每周）
    const weeklyTrendData = [
        { time: '3月第4周', value: 72 },
        { time: '4月第1周', value: 75 },
        { time: '4月第2周', value: 79 },
        { time: '4月第3周', value: 84 },
        { time: '4月第4周', value: 90 }
    ];

    // 热度趋势数据（每月）
    const monthlyTrendData = [
        { time: '2024-11', value: 65 },
        { time: '2024-12', value: 68 },
        { time: '2025-01', value: 70 },
        { time: '2025-02', value: 74 },
        { time: '2025-03', value: 78 },
        { time: '2025-04', value: 85 }
    ];

    // 热度分布数据
    const distributionData = [45, 35, 20]; // 高热度、中等热度、低热度

    // 热度趋势图
    const trendChart = new Chart(document.getElementById('hotTrendChart'), {
        type: 'line',
        data: {
            labels: dailyTrendData.map(d => d.time),
            datasets: [{
                label: '平均热度',
                data: dailyTrendData.map(d => d.value),
                borderColor: '#dc3545',
                tension: 0.1,
                fill: true,
                backgroundColor: 'rgba(220, 53, 69, 0.1)'
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'top'
                },
                title: {
                    display: true,
                    text: '新闻热度趋势变化'
                }
            },
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });

    // 热度分布图
    const distributionChart = new Chart(document.getElementById('hotDistributionChart'), {
        type: 'doughnut',
        data: {
            labels: ['高热度', '中等热度', '低热度'],
            datasets: [{
                data: distributionData,
                backgroundColor: [
                    '#dc3545',
                    '#ffc107',
                    '#6c757d'
                ]
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'bottom'
                }
            }
        }
    });

    // 更新趋势图表
    function updateTrendChart(period) {
        let data;

        switch(period) {
            case 'day':
                data = dailyTrendData;
                break;
            case 'week':
                data = weeklyTrendData;
                break;
            case 'month':
                data = monthlyTrendData;
                break;
            default:
                data = dailyTrendData;
        }

        trendChart.data.labels = data.map(d => d.time);
        trendChart.data.datasets[0].data = data.map(d => d.value);
        trendChart.update();

        // 切换按钮状态
        document.querySelectorAll('.btn-group .btn').forEach(btn => {
            btn.classList.remove('active');
        });
        event.target.classList.add('active');
    }
</script>
</body>
</html>